import React, { Component } from "react";
// import { connect } from 'dva';
import { Input, Form, Modal, Select } from "antd";
import styles from "./PushModal.less";

const FormItem = Form.Item;
const { Option } = Select;
const { TextArea } = Input;

@Form.create()
class PushModal extends Component {
  // 提交
  handleOk = () => {
    // 校验表单
    this.props.form.validateFields((err, values = {}) => {
      // 表单校验规则不通过
      if (err) {
        return;
      }
      if (this.props.dataSource && this.props.dataSource.pushPlanId) {
        // 编辑-提交
        const { creator, creatorName, pushPlanId } = this.props.dataSource;
        const params = {
          ...values,
          creator,
          creatorName,
          pushPlanId
        };
        this.props.dispatch({
          type: "pushList/pushConfMod",
          payload: params
        });
      } else {
        // 添加-提交 创建者暂定为空
        const params = {
          ...values,
          creator: null,
          creatorName: null,
          status: "1"
        };
        this.props.dispatch({
          type: "pushList/pushConfAdd",
          payload: params
        });
      }
    });
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    const {
      dataSource = {},
      showModal,
      closeModal,
      DropDownList = {}
    } = this.props;
    const {
      pushPlanId,
      pushPlanName,
      appId,
      ruleId,
      pushDesc,
      sceneId,
      templateId
    } = dataSource;
    // 业务系统下拉框选项
    const AppOptions = (DropDownList.app || []).map(d => (
      <Option key={d.appId} value={d.appId}>
        {d.appName}
      </Option>
    ));
    const RulesOptions = (DropDownList.pushRule || []).map(d => (
      <Option key={d.ruleId} value={d.ruleId}>
        {d.ruleName}
      </Option>
    ));
    const SceneOptions = (DropDownList.pushScene || []).map(d => (
      <Option key={d.sceneId} value={d.sceneId}>
        {d.sceneName}
      </Option>
    ));
    const TemplateOptions = (DropDownList.template || []).map(d => (
      <Option key={d.templateId} value={d.templateId}>
        {d.title}
      </Option>
    ));
    return (
      <Modal
        title={pushPlanId ? "编辑推送" : "新增推送"}
        visible={showModal}
        onCancel={closeModal}
        onOk={this.handleOk}
        destroyOnClose={true}
        okText={"确定"}
        cancelText={"取消"}
        zIndex={999}
        style={{ top: 20 }}
        width={600}
      >
        <Form layout="inline" className={styles.root}>
          <FormItem label={"推送名称"} className={styles.selectTitle}>
            {getFieldDecorator("pushPlanName", {
              rules: [
                {
                  required: true,
                  message: "请输入推送名称!"
                },
                {
                  pattern: /^[a-zA-Z0-9_\u4e00-\u9fa5]+$/,
                  message: "推送名称含非法字符!"
                }
              ],
              initialValue: pushPlanName
            })(<Input placeholder="请输入" style={{ width: 425 }} />)}
          </FormItem>
          <FormItem label={"业务系统"} className={styles.selectTitle}>
            {getFieldDecorator("appId", {
              rules: [
                {
                  required: true,
                  message: "请选择业务系统!"
                }
              ],
              initialValue: appId
            })(
              <Select placeholder="请选择" style={{ width: 200 }}>
                {AppOptions}
              </Select>
            )}
          </FormItem>
          <FormItem label={"推送规则"} className={styles.selectTitle}>
            {getFieldDecorator("ruleId", {
              rules: [
                {
                  required: true,
                  message: "请选择推送规则!"
                }
              ],
              initialValue: ruleId
            })(
              <Select placeholder="请选择" style={{ width: 200 }}>
                {RulesOptions}
              </Select>
            )}
          </FormItem>
          <FormItem label={"推送描述"} className={styles.selectTitle}>
            {getFieldDecorator("pushDesc", {
              rules: [
                {
                  required: true,
                  message: "请输入推送描述!"
                }
              ],
              initialValue: pushDesc
            })(
              <TextArea
                placeholder="不超过300个字符"
                rows={4}
                cols={120}
                maxLength={300}
                style={{ width: 425 }}
              />
            )}
          </FormItem>
          <FormItem label={"推送场景"} className={styles.selectTitle}>
            {getFieldDecorator("sceneId", {
              rules: [
                {
                  required: true,
                  message: "请选择推送场景!"
                }
              ],
              initialValue: sceneId
            })(
              <Select placeholder="请选择" style={{ width: 200 }}>
                {SceneOptions}
              </Select>
            )}
          </FormItem>
          <FormItem label={"推送模板"} className={styles.selectTitle}>
            {getFieldDecorator("templateId", {
              rules: [
                {
                  required: true,
                  message: "请选择推送场景!"
                }
              ],
              initialValue: templateId
            })(
              <Select placeholder="请选择" style={{ width: 200 }}>
                {TemplateOptions}
              </Select>
            )}
          </FormItem>
        </Form>
      </Modal>
    );
  }
}

export default PushModal;
